<template>
  <div style="display: inline-block">
    <el-button size="mini" @click="$emit('custom-col')">自定义列</el-button>
    <el-button size="mini" type="primary" @click="$emit('default-col')">默认列
    </el-button>
    <el-select size="mini" style="width: 150px;margin-left: 10px" v-model="templateVal_"
               placeholder="选择模板"
               @change="handleChangeTemplate">
      <el-option
        v-for="item in templateList"
        :key="item.id"
        :label="item.name"
        :value="item.id">
        <span style="float: left">{{ item.name }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">
                    <el-button size="mini" @click.stop="$emit('del-template',item.id,item.name)" type="text"><i
                      class="el-icon-delete"/></el-button>
                  </span>
      </el-option>
    </el-select>
    <el-tooltip class="item" effect="dark" content="保存当前自定义列与筛选条件" placement="top">
      <el-button icon="myicon icon-save" size="mini" circle @click="$emit('save-template')"></el-button>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: "CommonCpn",
  props: {
    templateList: {
      type: Array,
      default: () => []
    },
    templateVal: {
      type: String
    }
  },
  data() {
    return {
      templateVal_: this.templateVal,
      activeColor: "#13ce66",
      inactiveColor: "#ccc",
      statusVal: false
    }
  },
  methods: {
    handleChangeTemplate(val) {
      this.$emit('change-template',val)
      this.$emit('update:templateVal',val)
    }
  }
}
</script>

<style scoped>

</style>
